<template>
  <div class="orderlistwrap" v-show="this.$store.state.isShowOrderList">
    <!-- 标题部分 -->
    <div class="back">
      <van-icon class="icon" @click="back" name="arrow-left" /><span
        class="name"
        >预约列表</span
      >
    </div>
    <!-- 列表部分 -->
    <div class="main">
      <div class="listitem" v-for="(item, index) in itemList" :key="index">
        <div class="header">
          <span class="address">{{ item.address }}</span
          ><span class="state">{{ item.state }}</span>
        </div>
        <div class="body">
          <span class="content">{{ item.content }}</span
          ><span class="time">{{ item.time }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as SERVICE from '../../utils/service'
export default {
  data() {
    return {
      item: {
        address: '地点',
        state: '未处理',
        content: '内容',
        time: '时间',
      },
      itemList: [],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.itemList = [] //加载之前先清空数据
      //加载数据
      SERVICE.selectAllServiceOrdersByUserName(
        JSON.parse(localStorage.getItem('userinfo')).phoneNum
      ).then((res) => {
        let data = res.data
        //解析数据
        let len = data.length - 1
        while (len >= 0) {
          this.itemList.unshift({
            address: data[len].serviceAddress,
            state: data[len].orderState == 1 ? '已处理' : '未处理',
            content: data[len].serviceContent,
            time: data[len].orderTime,
          })
          len--
        }
      })
    })
  },
  computed: {
    onOrderListState() {
      return this.$store.state.isShowOrderList
    },
  },
  watch: {
    onOrderListState(value) {
      if (value) {
        this.itemList = [] //加载之前先清空数据
        //加载数据
        SERVICE.selectAllServiceOrdersByUserName(
          JSON.parse(localStorage.getItem('userinfo')).phoneNum
        ).then((res) => {
          let data = res.data
          //解析数据
          let len = data.length - 1
          while (len >= 0) {
            this.itemList.push({
              address: data[len].serviceAddress,
              state: data[len].orderState == 1 ? '已处理' : '未处理',
              content: data[len].serviceContent,
              time: data[len].orderTime,
            })
            len--
          }
        })
      }
    },
  },

  methods: {
    // selectAllServiceOrdersByUserName
    back() {
      console.log('返回上一级')
      //显示订单服务页面
      this.$store.dispatch('setIsShowOrderList', false)
    },
  },
}
</script>
<style lang="less" scoped>
.orderlistwrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-image: url('../../../static/imgs/list/bk.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 999;
  .back {
    position: fixed;
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: snow;
    text-align: left;
    height: 0.933333rem;
    padding: 0.266667rem;
    font-size: 0.6rem;
    .icon {
      display: inline-block;
      margin: 0.133333rem;
    }
    .name {
      display: inline-block;
      margin: 0 auto;
    }
  }
  .main {
    margin-top: 1.5rem;
  }
  //订单内容
  .listitem {
    font-size: 0.3rem;
    color: #fff;
    background-color: rgb(158, 194, 61);
    padding: 0.133333rem;
    height: 60px;
    margin-bottom: 0.05rem;
    border: 1px solid skyblue;
    .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid #fff;
    }
    .body {
      display: flex;
      flex-direction: column;
      justify-content: start;
      .content,
      .time {
        padding-left: 15px;
        margin-top: 0.133333rem;
        align-self: flex-start;
      }
    }
  }
}
</style>
